<template>
	<div class="slider">
		<div class="info" v-if="label || max">
			<div class="label">{{ label }}</div>
			<div class="max">{{ max }}</div>
		</div>

		<a-slider
			:step="step"
			v-model:value="modelValue"
			:marks="marks"
			:min="minValue"
			:max="maxValue"
		></a-slider>
	</div>
</template>
<script lang="ts" setup>
	import { computed } from 'vue'
  import { debounce } from 'lodash'
	import { Slider as aSlider } from 'ant-design-vue'
	interface Props {
		value: number
		max?: number | string
		minValue?: number
		maxValue?: number
		label?: string
		marks?: Record<number, any>
		tipFormatter?: Function
		color?: string
		step?: number
	}

	const emits = defineEmits(['update:value', 'change'])
	const props = withDefaults(defineProps<Props>(), {})
	let v = 0
	const modelValue = computed({
		get() {
			return props.value
		},
		set(value: number) {
			v = value
			emits('update:value', v)
			debounceChange() //防抖
		},
	})
	const debounceChange = debounce(() => {
		emits('change', v)
	}, 200)

	const bgcolor = computed(() => props.color ?? '#91caff')
</script>

<style lang="scss" scoped>
	:deep(.ant-slider-track) {
		background-color: v-bind(bgcolor);
	}

	:deep(.ant-slider-track) {
		height: 10px;
	}
	:deep(.ant-slider-handle::after) {
		width: 30px !important;
		height: 30px !important;
		margin: auto 0;
	}

	:deep(.ant-slider-handle) {
		width: 30px !important;
		height: 30px !important;
	}

	.info {
		display: flex;
		justify-content: space-between;
		font-size: 50px;
	}

	:deep(.ant-slider-rail) {
		background-color: #ffffff3f !important;
		height: 10px;
	}

	:deep(.ant-tooltip-inner) {
		font-size: 200px !important;
	}

	:deep(.ant-slider-mark) {
		top: 30px;
	}

	:deep(.ant-slider-mark-text) {
		font-size: 30px !important;
		color: #ffffffc4 !important;
	}
</style>
